<template>
  <div>
    <!-- <my-one title="我是你的爸爸" v-model="money"/> -->
    <!-- <h3 ref="name">我是妮芷的</h3>
    <button @click="getname">我</button> -->
    <input ref="name" type="text" name="" id="" placeholder="输入数据" v-if="isshow" @blur="blur" v-model="value">
    <button v-else @click="fn">点击搜索</button>
    <component :is="istrue" />
    <input type="text" v-focus >
    <h1 v-color="color">wwwww</h1>
    <button @click="color='yellow'">变色</button>
    <MyDialog>
      
      <p>妮芷该吃饭了</p>
    </MyDialog>
    <MyDialog>
      <template v-slot:chachaoone>
        <h3>红红火火恍恍惚惚</h3>
      </template>
    </MyDialog>
    <MyDialog>
      <template #bottom="obj">
        <!-- {{ obj }} -->
        <button>{{ obj.yes }}</button>
        <button>{{ obj.no }}</button>
        <button>{{ obj.money }}</button>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyOne from "./components/MyOne.vue";
import MyDialog from "./components/MyDialog.vue";
export default {
  components:{
    MyOne,
    MyDialog
  },
  directives:{
    color:{
      inserted(el,{value}){
        console.log(value);
        el.style.color=value
      },
      update(el,binding){
        el.style.color=binding.value
      }
    }
  },
  data() {
    return {
      money:30,
      isshow:false,
      value:'',
      istrue:'',
      color:'yellowgreen'
    };
  },

  mounted() {
  },

  methods: {
    // getname(){
    //   console.log(this.$refs.name);
    // },
    fn(){
      this.isshow=true
      this.istrue='MyOne'
      this.$nextTick(()=>{
        this.$refs.name.focus()
      })
    },
    blur(){
      this.isshow=false
      this.istrue=''
      this.$nextTick(()=>{
        console.log(this.value)
      })
    }
  },
};
</script>

<style lang="scss" scoped>

</style>